<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //window.onload：是页面加载完成后执行
        window.onload = function () {
            //获取body标签
            //方法一：
            var body = document.getElementsByTagName("body")[0];
            // alert(body)

            //方法二：
            var body1 = document.body;
            // alert(body1)

            //documentElement:获取html标签
            var documentElement = document.documentElement;
            console.log(documentElement)

            // all 获取页面中所有的元素
            var all = document.all;
            console.log(all)

            //获取所有的div标签
            var divs = document.getElementsByTagName("div");
            console.log(divs.length)

            //querySelector: 获取页面中第一个匹配的元素
            var element = document.querySelector(".box1 div");
            var element1 = document.querySelector("#div1");
            console.log(element)
            console.log(element1)

            //querySelectorAll: 获取页面中所有匹配的元素
            var divs = document.querySelectorAll(".box1 div");
            console.log(divs.length)
        }


    </script>
</head>
<body>
<div id="div1">我是div1</div>
<div class="box1">
    <div>我是box1的div1</div>
    <div>我是box1的div1</div>
    <div>我是box1的div1</div>
</div>
</body>
</html>
